<template>
	<view class="home" :class="[isEmpty ? 'hEmpty' : null]">
		<u-navbar title="需冷量记录" class="navHeader noFixed" :is-back="false" title-size="36" title-color="#333333"></u-navbar>
		
		<view class="needCode" v-if="!isEmpty">
			<view class="item" v-for="(item, i) in dataList" :key="i">
				<view class="header-time">
					<image src="../static/icon_time.png" mode=""></image>
					{{ item.createTime }}
				</view>
				<u-row gutter="16" class="header">
					<u-col span="6">
						<view class="bg-purple">样品品种：{{ item.sampleVariety }}</view>
					</u-col>
					<u-col span="6">
						<view class="bg-purple">样品编号：{{ item.sampleNo }}</view>
					</u-col>
					<u-col span="6">
						<view class="bg-purple">采集日期：{{ item.collectDate | dateFormat }}</view>
					</u-col>
					<u-col span="6">
						<view class="bg-purple">萌芽率：{{ (item.germinationRate || 0) * 100 }}%</view>
					</u-col>
					<u-col span="6">
						<view class="bg-purple">需冷量：{{ item.chillingRequirementSum || 0 }}H</view>
					</u-col>
					<u-col span="6">
						<view class="bg-purple">需冷类型：<text>{{ item.chillingRequirementTypeDesc }}</text></view>
					</u-col>
				</u-row>
			</view>
		</view>
		<empty v-else :showButton="!loginStatus" :message="loginStatus ? '暂时还没有内容' : ''" @onReload="showLogin" />	
		
		<u-tabbar :list="tabbar" :mid-button="true" mid-button-size="308" icon-size="48" :border-top="false"></u-tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import empty from '../components/empty.vue'
import storage from '@/common/js/storage';
import UserLogin from '@/common/js/login'
export default {
	components: {
		empty
	},
	mixins: [UserLogin],
	data() {
		return {
			isEmpty: false,
			loginStatus: true,
			dataList: [],
			pageInfo: {
				currentPage: 1,
				totalPage: 10
			}
		};
	},
	computed: {
		...mapState(['tabbar'])
	},
	async onShow() {
		this.pageInfo.currentPage = 1
		this.dataList = []
		await this.__init()
	},
	onReachBottom() {
		let pageInfo = this.pageInfo
		if(pageInfo.currentPage < pageInfo.totalPage) {
			pageInfo.currentPage = pageInfo.currentPage + 1
			this.__init()
		}
	},
	methods: {
		async __init() {
			uni.showLoading({
				title: '加载中'
			})
			await this.$u.get('/public/lipingggu/queryLipingguChillingRequirementRecord', this.pageInfo).then((data) => {
				uni.hideLoading()
				if(data.status == -1) { return }
				if(data.status === 2000) {
					storage.clear()
					this.$store.commit('clearUserInfo')
					this.showLogin()
				} else {
					this.dataList.push(...data.items)
					this.pageInfo.totalPage = data.totalPage
					if(this.dataList.length <= 0) {
						this.isEmpty = true
					} else {
						this.isEmpty = false
					}
				}
			});
		},
		showLogin() {
			let _this = this
			uni.showModal({
				title: '登录提示',
				content: '请确认是否授权登录账号？',
				cancelText: '暂不登录',
				cancelColor: '#333333',
				confirmText: '立即登录',
				confirmColor: '#00A1F2',
				success(res) {
					if(res.confirm) {
						_this.getUserInfo(_this.__init)
					} else {
						_this.isEmpty = true
						_this.loginStatus = false
					}
				}
			})
		},
	}
}
</script>

<style lang="less" scoped>
.home {
	background-size: contain;
	width: 100%;
	height: 100vh;
	// padding: 0 48rpx;
	&.hEmpty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}
/deep/.u-tabbar__content__item__button {
	top: 6rpx !important;
}

.needCode {
	padding: 50rpx 32rpx 20rpx;
	.item {
		margin-bottom: 32rpx;
		padding: 0 32rpx;
		background: #FFFFFF;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 32rpx;
	}
	.header-time {
		margin-bottom: 24rpx;
		padding: 24rpx 0;
		display: flex;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1px solid #BBBBBB;
		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			margin-right: 8rpx;
		}
	}
	.bg-purple {
		display: flex;
		padding-bottom: 24rpx;
		line-height: 44rpx;
		text {
			display: flex;
			align-items: center;
			width: 49%;
		}
	}
}
</style>
